
{% load static %}
<!doctype html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="../static/css/default.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/mobile.css" />
    <link rel='stylesheet' href='../static/css/jquery-ui.css'>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
    <script type="text/javascript" src="{%static 'js/jquery-1.8.3.min.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/common.js'%}"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,user-scalable=no">
    <title>武汉市网约车辅助决策系统-司机情况概览</title>
</head>

<body style="overflow:-Scroll;overflow-y:hidden; overflow-x:hidden">
    <div id="wrapper">
        <h1>武汉市网约车辅助决策系统-司机情况概览</h1>
        <h2><strong>&nbsp;&nbsp; DHM</strong><sub>Focus on the indicators</sub><b class="logoline"></b><b class="logoline1"></b><b class="logoline2"></b><b class="logoline3"></b><b class="logoline4"></b></h2>
        <!--时间区-->
        <div class="date-timer">
            <p>
                <strong id="H"></strong>
                <strong>:</strong>
                <strong id="M"></strong>
                <strong id="S" class="hide"></strong>
            </p>
            <em id="D"></em>
            <ul>
                <li id="Y"></li>
                <li id="MH"></li>
                <li id="TD"></li>
            </ul>
        </div>
        <div class="big-index-1">
            <ul>
                <li>
                    <b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
                    <p>平台登记司机数</p>
                    <strong>7</strong>
                </li>
                <li>
                    <b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
                    <p>平台总接单数</p>
                    <strong>13065</strong>
                </li>
                <li>
                    <b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
                    <p>行驶总时长（h）</p>
                    <strong>632.4</strong>
                </li>
                <li>
                    <b class="animation-1"></b><b class="animation-2"></b><b class="animation-3"></b>
                    <p>行驶总里程（km）</p>
                    <strong>6418.8</strong>
                </li>
            </ul>
        </div>
        <div class="submenu">

        </div>
        <div class="center-area">
            <div class="pandect-area">
                <span class="pandect-area-left">
                    <b></b>
                </span>
                <div class="pandect-area-center">
                    <div id="container" style="height: 300px;width: 500px;left:0px"></div>
                </div>
                <span class="pandect-area-right">
                    <b></b>
                </span>
            </div>
            <div class="details1-area">
                <span class="detailsl-area-left"></span>
                <div class="details1-area-center">
                    <h3>每日接单数</h3>
                    <dl>
                        <dt>月平均值</dt>
                        <dd>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li class="red"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <span id="meanday"></span>
                        </dd>
                        <dt>月峰值</dt>
                        <dd>
                            <ul>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                            </ul>
                            <span id="maxday"></span>
                        </dd>
                        <dt>月谷值</dt>
                        <dd>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <span id="minday"></span>
                        </dd>
                    </dl>
                    <b></b>
                </div>
                <span class="detailsl-area-right"></span>

            </div>
            <div class="details2-area">
                <span class="details2-area-left"></span>
                <div class="details2-area-center">
                    <h3>月轨迹统计</h3>
                    <dl>
                        <dt>月行驶里程总长</dt>
                        <dd>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li class="red"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <span id="sumdis"></span>
                        </dd>
                        <dt>月行驶时间总长</dt>
                        <dd>
                            <ul>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="yellow"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                            </ul>
                            <span id="sumtime"></span>
                        </dd>
                        <dt>月接单总数</dt>
                        <dd>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li class="red"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <span id="sumPerformance"></span>
                        </dd>
                    </dl>
                    <b></b>
                </div>
                <span class="details2-area-right"></span>
            </div>
        </div>
        <div class="right-area">
            <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;接单榜 <b></b></h3>
            <div class="area-inbox-1">
                <dl>
                    <dt>接单量</dt>
                    <dd class="font12"><span id="top1num"></span><b></b></dd>
                    <dt class="ml-20">本月冠军</dt>
                    <dd class="font-red ml-20"><span id="top1"></span><b></b></dd>
                    <dt>占本月总接单数百分比</dt>
                    <dd><span id="top1percent"></span><b></b></dd>
                </dl>
                <div class="round-1"></div>
                <div class="round-2"></div>
                <div class="round-3">Top4</div>
                <div class="round-4"></div>
            </div>
            <div class="area-inbox-2">
                <ul>
                    <li><strong>2</strong><span id="top2" style="font-size: 15px"></span><b></b><em></em></li>
                    <li><strong>3</strong><span id="top3" style="font-size: 15px"></span><b></b><em></em></li>
                    <li><strong>4</strong><span id="top4" style="font-size: 15px"></span><b></b><em></em></li>
                </ul>
                <div class="area-text">
                    <b class="animation-line1"></b>
                    <h4>轨迹统计说明：</h4>
                    <p class="text_container">
                        <script>
                            var s = '此处轨迹统计的行驶长度与行驶时间仅包括司机在载客时的统计数据';
                            var con = $('.text_container');
                            var index = 0;
                            var length = s.length;
                            var tId = null;

                            function start() {
                                con.text('');
                                tId = setInterval(function() {
                                    con.append(s.charAt(index));
                                    if (index++ === length) {
                                        clearInterval(tId);
                                        index = 0;
                                        start()
                                    }
                                }, 100);
                            }
                            start();
                        </script>
                    </p>
                    <b class="animation-line2"></b>
                </div>
            </div>
        </div>
        <div class="time-base-outer">
            <b class="line1"></b>
            <div class="time-base">
                <div class="slider2"></div>
                <script src="{%static 'js/jquery_and_jqueryui.js'%}"></script>
                <script src="{%static 'js/driverprofile.js'%}"></script>
            </div>
            <b class="line2"></b>
        </div>
    </div>
</body>

</html>